window.onload = function(){
    var Oul = document.getElementsByClassName("img-list")[0];
    var OliArray = Oul.getElementsByTagName("li");
    var pointer = document.getElementsByClassName("pointer")[0];
    var PointerArray = pointer.getElementsByTagName("a");
    var nextBanner = document.getElementsByClassName("next")[0];
    var prevBanner = document.getElementsByClassName("prev")[0];

    var timer,autoTimer, next = 0,pre = OliArray.length-1;
    PointerArray[0].className = "active";
    
    autoPlay();
    // 点击轮播
    for(let i=0;i<PointerArray.length;i++){
        PointerArray[i].onclick = function(){
            //将自动轮播的定时器清空
            clearInterval(autoTimer);
            for(let j=0;j<OliArray.length;j++){
                if(j!=i){
                    OliArray[j].style.zIndex = 0;
                }
                if(j!=next)
                    OliArray[j].style.opacity = 0;
                if(j!=OliArray.length-1){
                    PointerArray[j].className = "";
                }
            }
            // console.log(pre,next,i)
            OliArray[i].style.zIndex=1;
            delayOpacity(OliArray[next],0,-0.1);
            delayOpacity(OliArray[i],1,0.1);
            PointerArray[i].className = "active";
            pre = i - 1 == 0? OliArray.length-1:i-1;
            next = i;
            //开启自动轮播
            autoPlay();
        }
    }

    // 点击下一张
    nextBanner.onclick = function(){
        //将自动轮播的定时器清空
        clearInterval(autoTimer);
        next++;
        pre++;
        next %= OliArray.length;
        pre %= OliArray.length;
        if(pre==OliArray.length-1){
            pre = 0;
        }
        for(let i=0;i<OliArray.length;i++){
            if(i!=next){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                PointerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        if(next==OliArray.length-1) {
            next = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        //开启自动轮播
        autoPlay();
    }
    //点击上一张
    prevBanner.onclick = function(){
        //将自动轮播的定时器清空
        clearInterval(autoTimer);
        pre = next;
        next = next-1>=0? next-1:OliArray.length-2;
        for(let i=0;i<OliArray.length;i++){
            if(i!=next){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                PointerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        if(next==OliArray.length-1) {
            next = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        pre = next - 1;
        //开启自动轮播
        autoPlay();
    }

    // 自动轮播
    function autoPlay(){
        autoTimer = setInterval(function(){
            next++;
            pre++;
            next %= OliArray.length;
            pre %= OliArray.length;
            if(pre==OliArray.length-1){
                pre = 0;
            }
            for(let i=0;i<OliArray.length;i++){
                if(i!=next){
                    OliArray[i].style.zIndex = 0;
                }
                if(i!=pre)
                    OliArray[i].style.opacity = 0;
                if(i!=OliArray.length-1){
                    PointerArray[i].className = "";
                }
            }
            OliArray[next].style.zIndex=1;
            delayOpacity(OliArray[pre],0,-0.1);
            delayOpacity(OliArray[next],1,0.1);
            if(next==OliArray.length-1) {
                next = 0;
                OliArray[next].style.opacity = 1;
            }
            PointerArray[next].className = "active";
        },3000);
    }
    function delayOpacity(obj,target,speed){
        clearInterval(timer);
        timer = setInterval(function(){
            var old = getComputedStyle(obj,null)['opacity'];
            // console.log(getComputedStyle(obj,null)['opacity'])
            var newVal = +old + +speed;
            // console.log(obj,newVal)
            if(parseInt(speed)>0 && newVal>=target){
                newVal = 1;
            }
            if(parseInt(speed)<0 && newVal<=target){
                newVal = 0;
            }
            obj.style.opacity = newVal;
            // console.log(getComputedStyle(obj,null)['opacity'])
            if(newVal==target){
                clearInterval(timer);
            }
        },100);
    }
}